CSS @debugã®ãã¯ãŒã掻çšããã¹ã¿ã€ã«ã·ãŒãã®ãããã°ãå¹çåãæ§æãäœ¿çšæ³ããã©ãŠã¶äºææ§ãé«åºŠãªãã¯ããã¯ãåŠã³ãããã¹ã ãŒãºãªWebéçºãå®çŸããŸãããã
CSS @debug: ã¹ã¿ã€ã«ã·ãŒããããã°ã®ããã®éçºè ã¬ã€ã
ãããã°ã¯Webéçºã«äžå¯æ¬ ãªéšåã§ãããCSSãäŸå€ã§ã¯ãããŸãããconsole loggingã®ãããªåŸæ¥ã®æ¹æ³ã圹ç«ã¡ãŸãããCSSããªããã»ããµïŒSassãLessãªã©ïŒã¯ããããã°å°çšã«èšèšããã匷åãªããŒã«ã§ãã@debugãã£ã¬ã¯ãã£ããæäŸããŸãããã®ã¬ã€ãã§ã¯ã@debugã«ãŒã«ã®æŠèŠãæ§æãäœ¿çšæ³ããã©ãŠã¶äºææ§ããããŠããã¹ã ãŒãºã§ä¿å®æ§ã®é«ãã¹ã¿ã€ã«ã·ãŒããäœæããããã®é«åºŠãªãã¯ããã¯ã«ã€ããŠè§£èª¬ããŸãã
CSS @debugãšã¯äœãïŒ
@debugãã£ã¬ã¯ãã£ãã䜿çšãããšãã³ã³ãã€ã«ããã»ã¹äžã«å€æ°ã®å€ãã¡ãã»ãŒãžããã©ãŠã¶ã®éçºè
ã³ã³ãœãŒã«ã«çŽæ¥åºåã§ããŸããããã¯ãè€éãªããžãã¯ãèšç®ã«ãã£ãŠãããã°ãå°é£ã«ãªãããšãããCSSããªããã»ããµãæ±ãéã«ç¹ã«åœ¹ç«ã¡ãŸããéåžžã®CSSãšã¯ç°ãªãã@debugã¯ãã©ãŠã¶ã§ãã€ãã£ãã«ãµããŒããããŠããããCSSããªããã»ããµå°çšã®æ©èœã§ãã
æ§æãšäœ¿çšæ³
@debugã®æ§æã¯éåžžã«ã·ã³ãã«ã§ããSassãLessã®ã³ãŒãå
ã§ãåã«@debugã®åŸã«èª¿æ»ãããå€ãåŒãèšè¿°ããŸãã
Sassã®äŸ
Sassã§ã¯ãæ§æã¯æ¬¡ã®ããã«ãªããŸã:
@debug expression;
äŸãã°:
$primary-color: #007bff;
$font-size: 16px;
@debug $primary-color;
@debug $font-size + 2px;
ããã«ããã$primary-colorã®å€ãš$font-size + 2pxã®çµæãã³ã³ãœãŒã«ã«åºåãããŸãã
Lessã®äŸ
Lessã§ããæ§æã¯éåžžã«ãã䌌ãŠããŸã:
@debug expression;
äŸãã°:
@primary-color: #007bff;
@font-size: 16px;
@debug @primary-color;
@debug @font-size + 2px;
ããã¯Sassã®äŸãšåæ§ã®åºåãçæããŸãã
åºæ¬çãªäŸ
@debugã®åã瀺ãããã«ãããã€ãã®åºæ¬çãªäŸãèŠãŠãããŸãããã
倿°ã®ãããã°
ããã¯æãäžè¬çãªäœ¿çšäŸã§ãã@debugã䜿çšããŠãã¹ã¿ã€ã«ã·ãŒãã®ä»»æã®æç¹ã§å€æ°ã®å€ãæ€æ»ã§ããŸãã
Sass:
$grid-columns: 12;
$grid-gutter: 20px;
$container-width: calc((100% - ($grid-gutter * ($grid-columns - 1))) / $grid-columns);
@debug $container-width;
ããã«ãããèšç®ããã$container-widthã®å€ãã³ã³ãœãŒã«ã«åºåãããèšç®ãæ£ããããšã確èªã§ããŸãã
Mixin/颿°ã®ãããã°
@debugã¯ãè€éãªMixinã颿°ããããã°ããéã«éåžžã«è²ŽéãªããŒã«ãšãªãåŸãŸãã
Sass:
@mixin breakpoint($point) {
@if $point == sm {
@media (min-width: 576px) {
@content;
}
} @else if $point == md {
@media (min-width: 768px) {
@content;
}
} @else if $point == lg {
@media (min-width: 992px) {
@content;
}
} @else {
@debug "Invalid breakpoint: #{$point}";
}
}
@include breakpoint(xl) {
.container {
max-width: 1200px;
}
}
ãã®äŸã§ã¯ãbreakpoint Mixinãç¡å¹ãªå€ãåãåã£ãå Žåã@debugãã£ã¬ã¯ãã£ããã³ã³ãœãŒã«ã«ãšã©ãŒã¡ãã»ãŒãžãåºåããŸãã
ã«ãŒãã®ãããã°
ã«ãŒããæ±ãéã@debugã¯ã«ãŒã倿°ã®é²è¡ç¶æ³ãšå€ã远跡ããã®ã«åœ¹ç«ã¡ãŸãã
Sass:
@for $i from 1 through 5 {
.item-#{$i} {
width: percentage($i / 5);
@debug $i;
}
}
ããã«ãããã«ãŒãã®åã€ãã¬ãŒã·ã§ã³ã§$iã®å€ãåºåãããé²è¡ç¶æ³ãç£èŠã§ããŸãã
é«åºŠãªãã¯ããã¯
åºæ¬ãè¶
ããŠã@debugã¯è€éãªã¹ã¿ã€ã«ã·ãŒãã®ãããã°ãæ¯æŽããããã«ããæŽç·Žãããæ¹æ³ã§äœ¿çšã§ããŸãã
æ¡ä»¶ä»ããããã°
@debugãæ¡ä»¶æãšçµã¿åãããããšã§ãç¹å®ã®æ¡ä»¶äžã§ã®ã¿ãããã°æ
å ±ãåºåã§ããŸãã
Sass:
$debug-mode: true;
@if $debug-mode {
@debug "Debug mode is enabled!";
$primary-color: #ff0000; // ãããã°çšã«ãã©ã€ããªã«ã©ãŒãäžæžã
} else {
$primary-color: #007bff;
}
.button {
background-color: $primary-color;
}
ãã®äŸã§ã¯ããããã°ã¡ãã»ãŒãžãšè²ã®å€æŽã¯ã$debug-mode倿°ãtrueã«èšå®ãããŠããå Žåã«ã®ã¿é©çšãããŸããããã«ãããæ¬çªã³ãŒããæ£ãããããšãªãããããã°æ
å ±ãç°¡åã«åãæ¿ããããšãã§ããŸãã
è€éãªèšç®ã®ãããã°
è€éãªèšç®ãæ±ãå Žåãããããåè§£ããŠåã¹ããããåå¥ã«ãããã°ã§ããŸãã
Sass:
$base-font-size: 16px;
$line-height: 1.5;
$margin-bottom: 1rem;
$calculated-margin: ($base-font-size * $line-height) + ($margin-bottom * $base-font-size);
@debug $base-font-size * $line-height;
@debug $margin-bottom * $base-font-size;
@debug $calculated-margin;
èšç®ã®åã¹ãããããããã°ããããšã§ããšã©ãŒã®åå ãè¿ éã«ç¹å®ã§ããŸãã
ãããïŒé£æ³é åïŒã®ãããã°
SassãLessã³ãŒãã§ãããïŒé£æ³é
åãšãåŒã°ããïŒã䜿çšããŠããå Žåã@debugã䜿ã£ãŠãã®å
å®¹ãæ€æ»ã§ããŸãã
Sass:
$theme-colors: (
"primary": #007bff,
"secondary": #6c757d,
"success": #28a745,
"danger": #dc3545
);
@debug $theme-colors;
ããã«ããã$theme-colorsãããå
šäœãã³ã³ãœãŒã«ã«åºåãããæ£ããå€ãå«ãŸããŠããããšã確èªã§ããŸãã
ã«ã¹ã¿ã 颿°ã®ãããã°
ã«ã¹ã¿ã 颿°ãäœæããéã¯ã@debugã䜿çšããŠå
¥åãã©ã¡ãŒã¿ãšæ»ãå€ã远跡ããŸãã
Sass:
@function lighten-color($color, $amount) {
@debug "Original color: #{$color}";
@debug "Lighten amount: #{$amount}";
$lightened-color: mix(white, $color, $amount);
@debug "Lightened color: #{$lightened-color}";
@return $lightened-color;
}
.element {
background-color: lighten-color(#007bff, 20%);
}
ããã«ãããå ¥åè²ãæããããéãããã³çµæãšããŠåŸãããæãããªã£ãè²ã確èªã§ãã颿°ãæåŸ ã©ããã«æ©èœããŠããããšãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãã
ãã©ãŠã¶äºææ§
@debugã¯ãã€ãã£ãã®CSSæ©èœã§ã¯ãªãããšãçè§£ããããšãéèŠã§ããããã¯SassãLessã®ãããªCSSããªããã»ããµã«åºæã®ãã£ã¬ã¯ãã£ãã§ãããããã£ãŠããã©ãŠã¶ã®äºææ§ã¯çŽæ¥é¢ä¿ãããŸããããã©ãŠã¶ã¯ã³ã³ãã€ã«ãããCSSã®ã¿ãèªèãã@debugã¹ããŒãã¡ã³ãã¯èªèããŸããã
ãããã°åºåã¯éåžžãã³ã³ãã€ã«ããã»ã¹äžã«ãã©ãŠã¶ã®éçºè ã³ã³ãœãŒã«ã«è¡šç€ºãããŸãããã®æ å ±ãã©ã®ããã«è¡šç€ºããããã¯ãç¹å®ã®ããªããã»ããµãšäœ¿çšããŠããããŒã«ïŒäŸïŒã³ãã³ãã©ã€ã³ã³ã³ãã€ã©ããã«ãã·ã¹ãã çµ±åããã©ãŠã¶æ¡åŒµæ©èœïŒã«ãã£ãŠç°ãªããŸãã
@debugã®ä»£æ¿ææ®µ
@debugã¯åŒ·åãªããŒã«ã§ãããç¹ã«CSSããªããã»ããµã䜿çšããŠããªãå Žåãããã©ãŠã¶ã§æçµçã«ã¬ã³ããªã³ã°ãããCSSããããã°ããå Žåã«ã¯ãCSSããããã°ããããã®ä»ã®ã¢ãããŒãããããŸãã
- ãã©ãŠã¶éçºè ããŒã«: ãã¹ãŠã®ã¢ãã³ãã©ãŠã¶ã¯ãCSSã«ãŒã«ã®æ€æ»ãã¹ã¿ã€ã«ã®ãªã¢ã«ã¿ã€ã 倿Žãã¬ã³ããªã³ã°åé¡ã®ç¹å®ãå¯èœã«ãã匷åãªéçºè ããŒã«ãæäŸããŸãããElementsããŸãã¯ãInspectorãã¿ãã¯ãããã°ã«éåžžã«åœ¹ç«ã¡ãŸãã
- ã³ã³ãœãŒã«ãã®ã³ã°: CSSã«ç¹åãããã®ã§ã¯ãããŸããããJavaScriptã®
console.log()ã䜿çšããŠCSSããããã£ã«é¢é£ããå€ãåºåã§ããŸããäŸãã°ãèŠçŽ ã®èšç®æžã¿ã¹ã¿ã€ã«ããã°ã«èšé²ããããšãã§ããŸãã - CSSãªã³ãã£ã³ã°: Stylelintã®ãããªããŒã«ã¯ãæœåšçãªãšã©ãŒãç¹å®ããCSSã®ã³ãŒãã£ã³ã°æšæºã匷å¶ããã®ã«åœ¹ç«ã¡ãŸãã
- ã³ã¡ã³ãã¢ãŠã: CSSã®äžéšãäžæçã«ã³ã¡ã³ãã¢ãŠãããããšã§ãåé¡ã®åå ãåãåããã®ã«åœ¹ç«ã¡ãŸãã
- ããŒããŒã§ã®ãã€ã©ã€ã: èŠçŽ ã«äžæçãªããŒããŒïŒäŸïŒ
border: 1px solid red;ïŒã远å ããŠããã®ãµã€ãºãšäœçœ®ãèŠèŠåããŸãã
ãã¹ããã©ã¯ãã£ã¹
@debugããã®ä»ã®ãããã°æè¡ã广çã«äœ¿çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ
®ããŠãã ãã:
- æ¬çªç°å¢ã«ãããã€ããåã«
@debugã¹ããŒãã¡ã³ããåé€ãã:@debugã¹ããŒãã¡ã³ãã¯æçµçãªCSSåºåã«åœ±é¿ãäžããŸããããã³ã³ãœãŒã«ãä¹±éã«ããæ©å¯æ å ±ãå ¬éããå¯èœæ§ããããŸããæ¬çªç°å¢ã«ãããã€ããåã«ãããããåé€ãããããããã°ã¢ãŒããç¡å¹ã«ããŠãã ããã - æç¢ºã§èª¬æçãªãããã°ã¡ãã»ãŒãžã䜿çšãã: æååãšå
±ã«
@debugã䜿çšããå Žåãã¡ãã»ãŒãžãæç¢ºã§èª¬æçã§ããããšã確èªããåºåã®ã³ã³ããã¹ããç°¡åã«çè§£ã§ããããã«ããŸãã - ã³ãŒããæŽçãã: ããæŽçãããã¢ãžã¥ãŒã«åãããCSSã¯ãããã°ã容æã§ããã³ã¡ã³ããæå³ã®ãã倿°åã䜿çšããè€éãªã¹ã¿ã€ã«ãããå°ãã管çãããããã£ã³ã¯ã«åå²ããŸãã
- ããŒãžã§ã³ç®¡çã䜿çšãã: Gitã®ãããªããŒãžã§ã³ç®¡çã·ã¹ãã ã䜿çšãããšããããã°äžã«ãšã©ãŒãå°å ¥ããå Žåã§ããã³ãŒãã®ä»¥åã®ããŒãžã§ã³ã«ç°¡åã«æ»ãããšãã§ããŸãã
- 培åºçã«ãã¹ããã: ãããã°åŸãç°ãªããã©ãŠã¶ãããã€ã¹ã§CSSã培åºçã«ãã¹ãããæåŸ ã©ããã«æ©èœããŠããããšã確èªããŸãã
ã°ããŒãã«ãªèŠç¹ããã®äŸ
@debugã䜿çšããCSSãããã°ã®ååã¯ãå°ççãªå Žæã察象èªè
ã«é¢ä¿ãªãäžè²«ããŠããŸãããã ãããããã°ããŠããç¹å®ã®CSSããããã£ãã¹ã¿ã€ã«ã¯ããããžã§ã¯ãã®èŠä»¶ãæåçèæ¯ã«ãã£ãŠç°ãªãå ŽåããããŸãã
- ç°ãªãç»é¢ãµã€ãºã«å¯Ÿå¿ããã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãã®ãããã°ïŒã°ããŒãã«ïŒ: ã°ããŒãã«ãªèŠèŽè
åãã®ã¬ã¹ãã³ã·ããŠã§ããµã€ããæ§ç¯ããéã
@debugã䜿çšããŠãã¬ãŒã¯ãã€ã³ããæ£ããæ©èœããŠãããããŸãæ§ã ãªåœã§äœ¿çšãããç°ãªãç»é¢ãµã€ãºã«ã¬ã€ã¢ãŠããé©åã«é©å¿ããŠãããã確èªããããšãã§ããŸããäŸãã°ãã¢ãžã¢ã§äžè¬çãªç»é¢ãµã€ãºã¯ãåç±³ããšãŒãããã®ãã®ãšã¯ç°ãªãå ŽåããããŸãã - ç°ãªãèšèªã«å¯Ÿå¿ããã¿ã€ãã°ã©ãã£ã®ãããã°ïŒåœéåïŒ: å€èšèªãŠã§ããµã€ãã«åãçµãéã
@debugã䜿çšããŠããã©ã³ããµã€ãºãè¡ã®é«ããæåééãç°ãªãæåäœç³»ãèšèªã«å¯ŸããŠé©åã§ããããšã確èªã§ããŸããäžéšã®èšèªã§ã¯ãæé©ãªå¯èªæ§ã®ããã«å€§ããªãã©ã³ããµã€ãºãç°ãªãè¡ã®é«ããå¿ èŠã«ãªãå ŽåããããŸããããã¯ãã©ãã³èªããŒã¹ã®èšèªãããªã«æåãã¢ã©ãã¢æåããŸãã¯CJKïŒäžåœèªãæ¥æ¬èªãéåœèªïŒæåãæ±ãå Žåã«ãé¢é£ããŸãã - å³ããå·ŠïŒRTLïŒãžã®ã¬ã€ã¢ãŠãã®ãããã°ïŒäžæ±ãåã¢ããªã«ïŒ: ã¢ã©ãã¢èªãããã©ã€èªã®ããã«å³ããå·Šã«æžãããèšèªã®ãŠã§ããµã€ããéçºããéã
@debugã䜿çšããŠã¬ã€ã¢ãŠããæ£ãããã©ãŒãªã³ã°ããããã¹ãŠã®èŠçŽ ãé©åã«é 眮ãããŠããããšã確èªã§ããŸãã - æåçãªé
æ
®ã®ããã®ã«ã©ãŒãã¬ããã®ãããã°ïŒå°åã«ãã£ãŠç°ãªãïŒ: è²ã¯ç°ãªãæåã§ç°ãªãæå³ã飿³ãæã€ããšããããŸãããŠã§ããµã€ãã®ã«ã©ãŒãã¬ãããéžæããéã
@debugã䜿çšããŠããŸããŸãªè²ã®çµã¿åããã詊ãããããã察象èªè ã«ãšã£ãŠæåçã«é©åã§ããããšã確èªããããšãã§ããŸããäŸãã°ãç¹å®ã®è²ã¯äžéšã®æåã§ã¯äžåãŸãã¯äžå¿«ãšèŠãªãããããšããããŸãã - ç°ãªãããŒã¿åœ¢åŒã«å¯Ÿå¿ãããã©ãŒã ããªããŒã·ã§ã³ã®ãããã°ïŒåœã«ãã£ãŠç°ãªãïŒ: ãŠãŒã¶ãŒããŒã¿ãåéãããã©ãŒã ãäœæããéããŠãŒã¶ãŒã®åœã«å¿ããŠç°ãªãããŒã¿åœ¢åŒãåŠçããå¿
èŠãããå ŽåããããŸããäŸãã°ãé»è©±çªå·ãéµäŸ¿çªå·ãæ¥ä»ã¯å°åã«ãã£ãŠåœ¢åŒãç°ãªãããšããããŸãã
@debugã䜿çšããŠããã©ãŒã ã®ããªããŒã·ã§ã³ãç°ãªãããŒã¿åœ¢åŒã§æ£ããæ©èœããŠããããšã確èªã§ããŸãã
çµè«
CSSã®@debugãã£ã¬ã¯ãã£ãã¯ãç¹ã«SassãLessã®ãããªCSSããªããã»ããµã䜿çšããŠããå Žåã«ãã¹ã¿ã€ã«ã·ãŒãããããã°ããããã®åŒ·åãªããŒã«ã§ãã@debugã广çã«äœ¿çšããããšã§ããšã©ãŒãè¿
éã«ç¹å®ããŠä¿®æ£ããã¹ã¿ã€ã«ã·ãŒããæåŸ
ã©ããã«æ©èœããããšã確èªã§ããŸããæ¬çªç°å¢ã«ãããã€ããåã«@debugã¹ããŒãã¡ã³ããåé€ããããšãå¿ããã«ãå
æ¬çãªCSSãããã°ã¢ãããŒãã®ããã«ä»ã®ãããã°æè¡ãšçµã¿åãããŠäœ¿çšããããšãæ€èšããŠãã ããããã®ã¬ã€ãã§æŠèª¬ããããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãCSSéçºã®ã¯ãŒã¯ãããŒãæ¹åããããä¿å®æ§ãé«ãå
ç¢ãªã¹ã¿ã€ã«ã·ãŒããäœæã§ããŸãã